<template>
    <div class="page-content flex-row row-between width100" ref="header">
			<div class="header_l flex-row font-22 pointer" @click="routerTo('/Index', '1')">
				<img src="../assets/logo.png" class="logo margin-r-20">
				芳草街街道办事处智慧治理专题应用系统
			</div>
			<div class="header_c">
				<el-menu :default-active="$store.state.menuIndex" class="el-menu-demo" mode="horizontal" background-color="transparent" text-color="#fff" active-text-color="#fff">
					<el-menu-item :index="item.sort" @click="routerTo(item.router, item.sort)" v-for="(item, index) in menuList" :key="index">
						{{item.name}}
					</el-menu-item>
				</el-menu>
			</div>
			<div class="header_r flex-row">
				<div class="quanping margin-r-20 pointer" @click="screen">
					<img src="../assets/images/quanping.png">
				</div>
				<div class="home margin-r-20 pointer" @click="routerTo('/Index', '1')">
					<img src="../assets/images/home.png">
				</div>
				<div class="loginOut margin-r-20 pointer" @click="cancellation">
					<img src="../assets/images/loginout.png">
				</div>
				<div class="avatar margin-r-10">
					<img src="../assets/images/avatar.png" class="width100">
				</div>
				<div class="nickName">
					{{userName}}
				</div>
			</div>
    </div>
</template>
<script>
	import screenfull from 'screenfull'
	import {loginOut} from '../api/request.js'
	export default {
		data() {
			return {
				userName: window.sessionStorage.getItem('userName'),
				menuIndex: '1',
				menuList: [
					{sort: '1', name: '首页', router: '/Index'},
					{sort: '2', name: '社区统计', router: '/Community'},
					{sort: '3', name: '部门统计', router: '/Department'},
					{sort: '4', name: '周报统计', router: '/Weekly'},
					{sort: '5', name: '月报统计', router: '/MonthlyReport'},
					{sort: '7', name: '年度统计', router: '/YearReport'},
					{sort: '6', name: '趋势分析', router: '/AnnualReport'}
				]
			}
		},
		mounted() {
			this.menuIndex = this.$store.state.menuIndex
			let headerH = this.$refs.header
			this.$store.commit('headerH', headerH.offsetHeight)
		},
		methods: {
			routerTo(path, index) {
				this.$router.push({ path: path })
				this.$store.commit('changeMenuIndex', index)
				document.documentElement.scrollTop = 0
			},
			// 全屏/退出全屏
			screen() {
				screenfull.toggle()
			},
			// 注销登录
			async cancellation(){
				const res = await loginOut()
				if(res.code==0){
					this.$store.commit('changeMenuIndex', "1")
					window.sessionStorage.setItem('token', '')
					this.$router.push('/login')
				}else{
					this.$message(res.msg)
				}
			}
		},
	}
</script>
<style lang="less" scoped>
	.logo{
		width: 31px;
	}
	.avatar{
		width: 35px;
		height: 35px;
		border-radius: 100%;
		overflow: hidden;
	}
</style>
<style lang="less">
	.header_c{
		.el-menu-item, .el-menu.el-menu--horizontal{
			border-bottom: none !important;
		}
		.el-menu-item:hover, .el-menu-item.is-active{ 
			background: #8f84ff !important;
			border-bottom: none !important;
		}
		.el-menu--horizontal>.el-menu-item a{
			text-decoration: none;
		}
	}
</style>